<template>
	<view class="Settled">
		<!-- 头部信息 -->
		<view class="header">
			<text class="title">专业讲师入驻申请</text>
			<text class="subtitle">加入我们的专业讲师团队，分享您的知识与经验</text>
			<view class="progress-container">
				<view class="progress-bar">
					<view class="progress-fill" :style="{ width: progress + '%' }"></view>
				</view>
				<text class="progress-text">{{ completedSteps }}/3 已完成</text>
			</view>
		</view>

		<!-- 表单主体 -->
		<view class="form-card">
			<!-- 基本信息部分 -->
			<view class="form-section">
				<view class="section-header">
					<view class="icon-container blue">
						<van-icon name="manager-o" color="#0ea5e9" size="34" />
					</view>
					<text class="section-title">基本信息</text>
				</view>
				<view class="form-grid">
					<!-- 姓名 -->
					<view class="form-item">
						<text class="form-label">真实姓名 <text class="required">*</text></text>
						<input type="text" v-model="formData.name" class="form-input"
							:class="{'error-input': errors.name}" placeholder="请输入身份证姓名"
							@blur="validateField('name')" />
						<text class="error-text" v-if="errors.name">{{ errors.name }}</text>
					</view>
					<!-- 性别 -->
					<view class="form-item">
						<text class="form-label">性别 <text class="required">*</text></text>
						<view class="radio-group">
							<view class="radio-option" :class="{'selected': formData.gender === 'male'}"
								@click="formData.gender = 'male'">
								<uni-icons type="male" color="#0ea5e9" size="16" class="radio-icon"></uni-icons>
								<text>男</text>
							</view>
							<view class="radio-option" :class="{'selected': formData.gender === 'female'}"
								@click="formData.gender = 'female'">
								<uni-icons type="female" color="#f472b6" size="16" class="radio-icon"></uni-icons>
								<text>女</text>
							</view>
						</view>
						<text class="error-text" v-if="errors.gender">{{ errors.gender }}</text>
					</view>

					<!-- 出生日期 -->
					<view class="form-item">
						<text class="form-label">出生日期 <text class="required">*</text></text>
						<picker mode="date" :value="formData.birthDate" :end="today" @change="onBirthDateChange">
							<view class="form-input" :class="{'error-input': errors.birthDate}">
								{{ formData.birthDate || '请选择出生日期' }}
							</view>
						</picker>
						<text class="error-text" v-if="errors.birthDate">{{ errors.birthDate }}</text>
					</view>

					<!-- 职业照 -->
					<view class="form-item">
						<text class="form-label">半身职业照片 <text class="required">*</text></text>
						<button class="upload-btn" :class="{'error-input': errors.photo}" @click="uploadPhoto">
							{{ formData.photo ? '已上传' : '请上传半身职业照' }}
						</button>
						<text class="error-text" v-if="errors.photo">{{ errors.photo }}</text>
					</view>

					<!-- 从业年限 -->
					<view class="form-item">
						<text class="form-label">从业年限 <text class="required">*</text></text>
						<input type="number" v-model="formData.yearsOfExperience" min="1" max="50" class="form-input"
							:class="{'error-input': errors.yearsOfExperience}" placeholder="请输入从业年限"
							@blur="validateField('yearsOfExperience')" />
						<text class="error-text" v-if="errors.yearsOfExperience">{{ errors.yearsOfExperience }}</text>
					</view>
				</view>
			</view>

			<!-- 分隔线 -->
			<view class="section-divider">
				<text class="divider-text"><uni-icons type="more" size="14" class="divider-icon"></uni-icons>
					继续填写</text>
			</view>

			<!-- 专业信息部分 -->
			<view class="form-section">
				<view class="section-header">
					<view class="icon-container purple">
						<van-icon name="hotel-o" color="#8b5cf6" size="34" />
					</view>
					<text class="section-title">专业信息</text>
				</view>

				<view class="form-grid single-column">
					<!-- 最高学历 -->
					<view class="form-item">
						<text class="form-label">最高学历 <text class="required">*</text></text>
						<picker mode="selector" :range="educationOptions"
							@change="(e) => { formData.highestEducation = educationOptions[e.detail.value]; validateField('highestEducation'); }">
							<view class="form-input" :class="{'error-input': errors.highestEducation}">
								{{ formData.highestEducation || '请选择' }}
							</view>
						</picker>
						<text class="error-text" v-if="errors.highestEducation">{{ errors.highestEducation }}</text>
					</view>

					<!-- 第一学历 -->
					<view class="form-item">
						<text class="form-label">第一学历 <text class="required">*</text></text>
						<picker mode="selector" :range="firstEducationOptions"
							@change="(e) => { formData.firstEducation = firstEducationOptions[e.detail.value]; validateField('firstEducation'); }">
							<view class="form-input" :class="{'error-input': errors.firstEducation}">
								{{ formData.firstEducation || '请选择' }}
							</view>
						</picker>
						<text class="error-text" v-if="errors.firstEducation">{{ errors.firstEducation }}</text>
					</view>

					<!-- 行业领域 -->
					<view class="form-item">
						<text class="form-label">行业领域 <text class="required">*</text></text>
						<picker mode="selector" :range="industryOptions"
							@change="(e) => { formData.industry = industryOptions[e.detail.value]; validateField('industry'); }">
							<view class="form-input" :class="{'error-input': errors.industry}">
								{{ formData.industry || '请选择' }}
							</view>
						</picker>
						<text class="error-text" v-if="errors.industry">{{ errors.industry }}</text>
					</view>

					<!-- 讲师级别 -->
					<view class="form-item">
						<text class="form-label">讲师级别 <text class="required">*</text></text>
						<picker mode="selector" :range="lecturerLevelOptions"
							@change="(e) => { formData.lecturerLevel = lecturerLevelOptions[e.detail.value]; validateField('lecturerLevel'); }">
							<view class="form-input" :class="{'error-input': errors.lecturerLevel}">
								{{ formData.lecturerLevel || '请选择' }}
							</view>
						</picker>
						<text class="error-text" v-if="errors.lecturerLevel">{{ errors.lecturerLevel }}</text>
					</view>

					<!-- 专业证书 -->
					<view class="form-item">
						<text class="form-label">专业证书 <text class="required">*</text></text>
						<input type="text" v-model="formData.certificate" class="form-input"
							:class="{'error-input': errors.certificate}" placeholder="请输入证书名称"
							@blur="validateField('certificate')" />
						<text class="error-text" v-if="errors.certificate">{{ errors.certificate }}</text>
					</view>

					<!-- 咨询小时数 -->
					<view class="form-item">
						<text class="form-label">咨询小时数 <text class="required">*</text></text>
						<input type="number" v-model="formData.consultingHours" class="form-input"
							:class="{'error-input': errors.consultingHours}" placeholder="请输入咨询小时数"
							@blur="validateField('consultingHours')" />
						<text class="error-text" v-if="errors.consultingHours">{{ errors.consultingHours }}</text>
					</view>

					<!-- 培训经验 -->
					<view class="form-item">
						<text class="form-label">培训经验 <text class="required">*</text></text>
						<input type="text" v-model="formData.trainingExperience" class="form-input"
							:class="{'error-input': errors.trainingExperience}" placeholder="请输入培训经验"
							@blur="validateField('trainingExperience')" />
						<text class="error-text" v-if="errors.trainingExperience">{{ errors.trainingExperience }}</text>
					</view>

					<!-- 受训经历 -->
					<view class="form-item">
						<text class="form-label">受训经历 <text class="required">*</text></text>
						<input type="text" v-model="formData.trainingHistory" class="form-input"
							:class="{'error-input': errors.trainingHistory}" placeholder="请输入受训经历"
							@blur="validateField('trainingHistory')" />
						<text class="error-text" v-if="errors.trainingHistory">{{ errors.trainingHistory }}</text>
					</view>
				</view>
			</view>

			<!-- 分隔线 -->
			<view class="section-divider">
				<text class="divider-text"><uni-icons type="more" size="14" class="divider-icon"></uni-icons>
					最后一步</text>
			</view>

			<!-- 服务信息部分 -->
			<view class="form-section">
				<view class="section-header">
					<view class="icon-container green">
						<van-icon name="flower-o" color="#10b981" size="34" />
					</view>
					<text class="section-title">服务信息</text>
				</view>

				<view class="form-grid">
					<!-- 常驻城市 -->
					<view class="form-item">
						<text class="form-label">常驻城市 <text class="required">*</text></text>
						<picker mode="selector" :range="cityOptions"
							@change="(e) => { formData.city = cityOptions[e.detail.value]; validateField('city'); }">
							<view class="form-input" :class="{'error-input': errors.city}">
								{{ formData.city || '请选择' }}
							</view>
						</picker>
						<text class="error-text" v-if="errors.city">{{ errors.city }}</text>
					</view>

					<!-- 海外服务经验 -->
					<view class="form-item">
						<text class="form-label">海外服务经验 <text class="required">*</text></text>
						<picker mode="selector" :range="hasOverseasExperienceOptions"
							@change="(e) => { formData.hasOverseasExperience = hasOverseasExperienceOptions[e.detail.value]; validateField('hasOverseasExperience'); }">
							<view class="form-input" :class="{'error-input': errors.hasOverseasExperience}">
								{{ formData.hasOverseasExperience || '请选择' }}
							</view>
						</picker>
						<text class="error-text"
							v-if="errors.hasOverseasExperience">{{ errors.hasOverseasExperience }}</text>
					</view>

					<!-- 海外服务经验描述 -->
					<view class="form-item" v-if="formData.hasOverseasExperience === '有'">
						<text class="form-label">海外服务经验描述 <text class="required">*</text></text>
						<input type="text" v-model="formData.overseasExperienceDesc" class="form-input"
							:class="{'error-input': errors.overseasExperienceDesc}" placeholder="请输入海外服务经验"
							@blur="validateField('overseasExperienceDesc')" />
						<text class="error-text"
							v-if="errors.overseasExperienceDesc">{{ errors.overseasExperienceDesc }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-container">
			<button class="submit-btn" @click="submitForm">
				<uni-icons type="paperplane" color="#ffffff" size="16" class="submit-icon"></uni-icons>
				提交申请
			</button>
		</view>

		<!-- 进度提示 -->
		<view class="footer">
			<text>我们将在1-3个工作日内审核您的申请</text>
		</view>
	</view>
</template>

<script>
	import {
		teacherSettle,
	} from "../../utils/getDate.js"
	export default {
		data() {
			return {
				today: this.getToday(),
				formData: {
					name: '',
					gender: '',
					birthDate: '',
					photo: '',
					yearsOfExperience: '',
					highestEducation: '',
					firstEducation: '',
					industry: '',
					lecturerLevel: '',
					certificate: '',
					consultingHours: '',
					trainingExperience: '',
					trainingHistory: '',
					city: '',
					hasOverseasExperience: '',
					overseasExperienceDesc: ''
				},
				educationOptions: ['博士', '硕士', '本科'],
				firstEducationOptions: ['博士', '硕士', '本科', '专科', '其他'],
				industryOptions: ['IT互联网', '金融经济', '教育培训', '医疗健康'],
				lecturerLevelOptions: ['资深专家', '高级讲师', '专业讲师'],
				cityOptions: ['北京', '上海', '广州', '深圳', '杭州', '成都'],
				hasOverseasExperienceOptions: ['有', '没有'],
				errors: {} // 新增错误信息对象
			}
		},
		computed: {
			// 计算完成步骤数
			completedSteps() {
				let steps = 0;

				// 第一步：基本信息完成检查
				if (this.formData.name &&
					this.formData.gender &&
					this.formData.birthDate &&
					this.formData.photo &&
					this.formData.yearsOfExperience) {
					steps++;
				}

				// 第二步：专业信息完成检查
				if (this.formData.highestEducation &&
					this.formData.firstEducation &&
					this.formData.industry &&
					this.formData.lecturerLevel &&
					this.formData.certificate &&
					this.formData.consultingHours &&
					this.formData.trainingExperience &&
					this.formData.trainingHistory) {
					steps++;
				}

				// 第三步：服务信息完成检查
				if (this.formData.city &&
					this.formData.hasOverseasExperience &&
					(this.formData.hasOverseasExperience !== '有' || this.formData.overseasExperienceDesc)) {
					steps++;
				}

				return steps;
			},
			// 计算进度百分比
			progress() {
				return Math.round((this.completedSteps / 3) * 100);
			}
		},
		methods: {
			getToday() {
				const date = new Date()
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				return `${year}-${month}-${day}`
			},
			onBirthDateChange(e) {
				this.formData.birthDate = e.detail.value
				this.validateField('birthDate')
			},
			uploadPhoto() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];

						// 检查文件大小
						uni.getFileInfo({
							filePath: tempFilePath,
							success: fileRes => {
								this.formData.photo = tempFilePath;
								this.validateField('photo');

								// 上传到服务器
								uni.uploadFile({
									url: 'https://applet.eapchina.net/api/sleep/uploadFile',
									filePath: tempFilePath,
									name: 'file',
									success: (uploadRes) => {
										const data = JSON.parse(uploadRes.data);
										this.formData.photo = data.imgUrl ||
											tempFilePath;
										uni.showToast({
											title: '照片上传成功',
											icon: 'success'
										});
									},
									fail: (err) => {
										console.error('上传失败:', err);
										uni.showToast({
											title: '上传失败，请重试',
											icon: 'none'
										});
									}
								});
							},
							fail: (err) => {
								console.error('获取文件信息失败:', err);
								uni.showToast({
									title: '获取图片信息失败',
									icon: 'none'
								});
							}
						});
					},
					fail: (err) => {
						console.error('选择图片失败:', err);
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			},
			// 验证单个字段
			validateField(field) {
				let isValid = true
				let message = ''

				switch (field) {
					case 'name':
						if (!this.formData.name) {
							isValid = false
							message = '请输入真实姓名'
						}
						break
					case 'gender':
						if (!this.formData.gender) {
							isValid = false
							message = '请选择性别'
						}
						break
					case 'birthDate':
						if (!this.formData.birthDate) {
							isValid = false
							message = '请选择出生日期'
						}
						break
					case 'photo':
						if (!this.formData.photo) {
							isValid = false
							message = '请上传半身职业照'
						}
						break
					case 'yearsOfExperience':
						if (!this.formData.yearsOfExperience) {
							isValid = false
							message = '请输入从业年限'
						} else if (this.formData.yearsOfExperience < 1 || this.formData.yearsOfExperience > 50) {
							isValid = false
							message = '从业年限应在1-50年之间'
						}
						break
					case 'highestEducation':
						if (!this.formData.highestEducation) {
							isValid = false
							message = '请选择最高学历'
						}
						break
					case 'firstEducation':
						if (!this.formData.firstEducation) {
							isValid = false
							message = '请选择第一学历'
						}
						break
					case 'industry':
						if (!this.formData.industry) {
							isValid = false
							message = '请选择行业领域'
						}
						break
					case 'lecturerLevel':
						if (!this.formData.lecturerLevel) {
							isValid = false
							message = '请选择讲师级别'
						}
						break
					case 'certificate':
						if (!this.formData.certificate) {
							isValid = false
							message = '请输入专业证书'
						}
						break
					case 'consultingHours':
						if (!this.formData.consultingHours) {
							isValid = false
							message = '请输入咨询小时数'
						}
						break
					case 'trainingExperience':
						if (!this.formData.trainingExperience) {
							isValid = false
							message = '请输入培训经验'
						}
						break
					case 'trainingHistory':
						if (!this.formData.trainingHistory) {
							isValid = false
							message = '请输入受训经历'
						}
						break
					case 'city':
						if (!this.formData.city) {
							isValid = false
							message = '请选择常驻城市'
						}
						break
					case 'hasOverseasExperience':
						if (!this.formData.hasOverseasExperience) {
							isValid = false
							message = '请选择是否有海外服务经验'
						}
						break
					case 'overseasExperienceDesc':
						if (this.formData.hasOverseasExperience === '有' && !this.formData.overseasExperienceDesc) {
							isValid = false
							message = '请输入海外服务经验描述'
						}
						break
				}

				if (isValid) {
					// 从errors对象中移除该字段的错误信息
					this.$delete(this.errors, field)
				} else {
					// 设置错误信息
					this.$set(this.errors, field, message)
				}

				return isValid
			},
			// 验证整个表单
			validateForm() {
				let isValid = true

				// 验证所有必填字段
				const requiredFields = [
					'name', 'gender', 'birthDate', 'photo', 'yearsOfExperience',
					'highestEducation', 'firstEducation', 'industry', 'lecturerLevel',
					'certificate', 'consultingHours', 'trainingExperience', 'trainingHistory',
					'city', 'hasOverseasExperience'
				]

				requiredFields.forEach(field => {
					if (!this.validateField(field)) {
						isValid = false
					}
				})

				// 特殊验证海外服务经验描述
				if (this.formData.hasOverseasExperience === '有' && !this.validateField('overseasExperienceDesc')) {
					isValid = false
				}

				return isValid
			},
			submitForm() {
				// 先验证表单
				if (!this.validateForm()) {
					uni.showToast({
						title: '请完善表单信息',
						icon: 'none',
						duration: 2000
					})
					return
				} else {
					let data = {
						userId: uni.getStorageSync("userinfo").id, // 从本地存储获取用户ID
						birthday: this.formData.birthDate, // 使用表单中的生日
						imgurl: this.formData.photo, // 使用上传的职业照片
						workyear: parseInt(this.formData.yearsOfExperience), // 工作年限转为整数
						highEducation: this.formData.highestEducation, // 最高学历
						firstEducation: this.formData.firstEducation, // 第一学历
						industry: this.formData.industry, // 行业领域
						level: this.formData.lecturerLevel, // 讲师级别
						qualification: this.formData.certificate, // 专业证书
						consulHours: this.formData.consultingHours.toString(), // 咨询小时数转为字符串
						trainingExperience: this.formData.trainingExperience, // 培训经验
						trained: this.formData.trainingHistory, // 受训经历
						city: this.formData.city, // 常驻城市
						overseasExperience: this.formData.hasOverseasExperience === '有' ? '1' : '0', // 海外服务经验(转换为1/0)
						overseasExperienceInfo: this.formData.hasOverseasExperience === '有' ?
							this.formData.overseasExperienceDesc : '' // 海外服务经验描述
					}


					teacherSettle(data).then(res => {
						uni.showLoading({
							title: '提交中...'
						})
						if (res.state == "ok") {
							uni.hideLoading()
							uni.showToast({
								title: '提交成功',
								icon: 'success'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						} else {
							uni.hideLoading()
							uni.showToast({
								title: '提交失败',
								icon: 'success'
							})
							setTimeout(() => {}, 1500)
						}

					})
				}




			}
		}
	}
</script>

<style scoped lang="scss">
	/* 页面容器 */
	.Settled {
		min-height: 100vh;
		background-color: #f8fafc;
		padding: 32rpx;

		/* 头部样式 */
		.header {
			text-align: center;
			margin-bottom: 40rpx;
		}

		.title {
			font-size: 48rpx;
			font-weight: bold;
			color: #1e293b;
			margin-bottom: 16rpx;
			display: block;
		}

		.subtitle {
			font-size: 36rpx;
			color: #64748b;
			display: block;
		}

		.progress-container {
			margin-top: 24rpx;
		}

		.progress-bar {
			width: 100%;
			height: 8rpx;
			background-color: #e2e8f0;
			border-radius: 4rpx;
			overflow: hidden;
		}

		.progress-fill {
			height: 100%;
			background-color: #3b82f6;
			border-radius: 4rpx;
		}

		.progress-text {
			font-size: 28rpx;
			color: #64748b;
			margin-top: 8rpx;
			display: block;
		}

		/* 表单卡片 */
		.form-card {
			background-color: #ffffff;
			border-radius: 24rpx;
			padding: 24rpx;
			margin-bottom: 40rpx;
			box-shadow: 0 20rpx 50rpx -10rpx rgba(0, 0, 0, 0.1), 0 20rpx 20rpx -10rpx rgba(0, 0, 0, 0.04);
		}

		/* 表单分区 */
		.form-section {
			margin-bottom: 40rpx;
		}

		.section-header {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;
		}

		.icon-container {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 32rpx;
		}

		.icon-container.blue {
			background-color: #e0f2fe;
		}

		.icon-container.purple {
			background-color: #f3e8ff;
		}

		.icon-container.green {
			background-color: #d1fae5;
		}

		.section-title {
			font-size: 40rpx;
			font-weight: 600;
			color: #1e293b;
		}

		/* 表单网格布局 */
		.form-grid {
			display: grid;
			grid-template-columns: 1fr;
			gap: 24rpx;
		}

		@media (min-width: 768px) {
			.form-grid {
				grid-template-columns: 1fr 1fr;
			}
		}

		.form-grid.single-column {
			grid-template-columns: 1fr;
		}

		/* 表单项目 */
		.form-item {
			margin-bottom: 24rpx;
		}

		.form-label {
			font-size: 28rpx;
			font-weight: 500;
			color: #334155;
			margin-bottom: 8rpx;
			display: block;
		}

		.required {
			color: #ef4444;
		}

		.form-input {
			padding: 24rpx;
			border: 2rpx solid #cbd5e1;
			border-radius: 12rpx;
			font-size: 28rpx;
			color: #334155;
		}

		.form-input:focus {
			outline: none;
			border-color: #3b82f6;
			box-shadow: 0 0 0 6rpx rgba(59, 130, 246, 0.2);
		}

		/* 错误样式 */
		.error-input {
			border-color: #ef4444 !important;
			background-color: rgba(239, 68, 68, 0.05);
		}

		.error-text {
			color: #ef4444;
			font-size: 24rpx;
			margin-top: 8rpx;
			display: block;
		}

		/* 单选按钮组 */
		.radio-group {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 12rpx;
		}

		.radio-option {
			border: 2rpx solid #cbd5e1;
			border-radius: 12rpx;
			padding: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all 0.2s ease;
		}

		.radio-option:hover {
			transform: translateY(-4rpx);
		}

		.radio-option.selected {
			border-color: #3b82f6;
			background-color: rgba(59, 130, 246, 0.05);
		}

		.radio-icon {
			margin-right: 8rpx;
		}

		/* 上传按钮 */
		.upload-btn {
			width: 100%;
			padding: 24rpx;
			border: 2rpx solid #cbd5e1;
			border-radius: 12rpx;
			font-size: 28rpx;
			color: #64748b;
			text-align: left;
			background-color: #ffffff;
		}

		.upload-btn::after {
			border: none;
		}

		/* 分隔线 */
		.section-divider {
			position: relative;
			margin: 40rpx 0;
			text-align: center;
		}

		.section-divider:before {
			content: "";
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			height: 2rpx;
			background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(14, 165, 233, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
		}

		.divider-text {
			position: relative;
			font-size: 28rpx;
			color: #94a3b8;
			font-weight: 500;
			padding: 0 20rpx;
			background-color: #ffffff;
		}

		.divider-icon {
			margin-right: 8rpx;
		}

		/* 提交按钮 */
		.submit-container {
			display: flex;
			justify-content: center;
		}

		.submit-btn {
			background-color: #3b82f6;
			color: #ffffff;
			font-weight: 500;
			padding: 15rpx 30rpx;
			border-radius: 25rpx;
			font-size: 32rpx;
			transition: all 0.2s ease;
		}

		.submit-btn:active {
			transform: scale(0.98);
			background-color: #2563eb;
		}

		.submit-icon {
			margin-right: 8rpx;
		}

		/* 页脚 */
		.footer {
			text-align: center;
			margin-top: 32rpx;
			font-size: 28rpx;
			color: #64748b;
		}
	}
</style>